<template>
    <div class="addgoods">
        <el-alert title="添加商品" type="success" show-icon />
        <div class="step">
            <el-steps :active="active" finish-status="success">
                <el-step title="基本信息" />
                <el-step title="商品参数" />
                <el-step title="商品属性" />
                <el-step title="商品图片" />
                <el-step title="商品内容" />
                <el-step title="完成" />
            </el-steps>
        </div>
        <div>
            <el-tabs tab-position="left" :before-leave="tabChange" v-model="activename">
                <el-tab-pane label="基本信息" name="one">
                    <infoMation ref="infoRef" @sendCateid="getCateid"></infoMation>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name="two">
                    <goodsParams :attr="attr"></goodsParams>
                </el-tab-pane>
                <el-tab-pane label="商品属性" name="three">
                    <goodsAttr :params="params"></goodsAttr>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name="four">
                    <el-upload :http-request="requestFile">
                        <el-button type="primary">上传商品图片</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name="five">
                    <myWangEditor></myWangEditor>
                      <el-button type="primary">确认添加</el-button>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script setup>
import {getParams,uploadImg} from '../../api/good.js'
import { ref,defineAsyncComponent} from 'vue';
import infoMation from './components/infomation.vue'
import goodsParams from './components/goodsParams.vue'
import goodsAttr from './components/goodsAttr.vue'
let myWangEditor = defineAsyncComponent(()=>import("./components/wangeditor.vue"))
let activename = ref('one')
let active = ref(0);
let infoRef = ref(null)
let isVal = ()=>{
    return new Promise((reslove,reject)=>{
    infoRef.value.ruleFormRef.validate((isVal)=>{
            reslove(isVal)
    });
    })
}
let tabChange = async()=>{
    let isTrue = await isVal();
    return isTrue;
}
let attr = ref([]);
let params = ref([])
let getCateid = async (id)=>{
    console.log(id)
    let attrList = await getParams(id,'many');
    let paramsList = await getParams(id,'only');
    console.log(attrList);
    console.log(paramsList)
    attr.value = attrList.data.data;
    params.value = paramsList.data.data;
}
let requestFile = async (e)=>{
    console.log(e)
    // 获取当前的文件对象
    let file = e.file;
    let data = new FormData();
    data.append("file",file);
    let res = await uploadImg(data);
    console.log(res.data.data)

}
</script>
<style scoped>
.addgoods {
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.step {
    width: 90%;
    margin: 10px auto;
}
</style>